<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="box">
        <!-- lazy属性从原本的实时获取数据，变更为失去焦点才获取属性 -->
        用户名: <input type="text" v-model.lazy="mytext"> 

        <!-- 不添加number修饰符时，用户输入数字后获取到的值默认是字符串，添加number后输入数字获取就为数字 -->
        年龄: <input type="text" v-model.number="myage">

        <!-- trim去首尾空格 -->
        密码: <input type="password" v-model.trim="mypassword">
        <button @click="handleSubmit">登陆</button>
    </div>
   


    <script type="text/javascript">
        var vm = new Vue ({
            el:"#box",
            data: {
                mytext:"",
                myage: 18,
                mypassword:""
            },
            methods:{
                handleSubmit(){
                    // console.log(this.mytext)
                    // console.log(this.myage)
                    console.log(this.mypassword)
                    
                }
            }
        })
    </script>
</body>
</html>